<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>操作当当购物车页面</title>
		<link type="text/css" rel="stylesheet" href="../操作当当购物车页面/css/cartStyle.css" />
		<script>
			window.onload = function() {
				// // add();
				cal();
			}

			function collection() {
				if (confirm("确定收藏吗?")) {
					alert("收藏成功");
				} else {
					alert("收藏失败");
				}
			}

			function sub() {
				var num = document.getElementById("numsub");

				if (num.value <= 0) {
					alert("数量不能为负数");
					return;

				}
				num.value = parseInt(num.value) - 1;
				var p = document.getElementById("pri");
				document.getElementById("price0").innerHTML = "¥:" + (num.value * parseFloat(p.value)).toFixed(2);
			cal();
			}

			function add() {
				var num = document.getElementById("numsub");
				num.value = parseInt(num.value) + 1;
				var p = document.getElementById("pri");
				document.getElementById("price0").innerHTML = "¥:" + (((num.value) * parseFloat(p.value))).toFixed(2);
				cal();
			}

			function sub1() {
				var num = document.getElementById("numsub1");

				if (num.value <= 0) {
					alert("数量不能为负数");
					return;

				}
				num.value = parseInt(num.value) - 1;
				var p = document.getElementById("pri2");
				document.getElementById("price1").innerHTML = "¥:" + (((num.value) * parseFloat(p.value))).toFixed(2);
				cal();
			}

			function add1() {
				var num = document.getElementById("numsub1");
				num.value = parseInt(num.value) + 1;
				var p = document.getElementById("pri2");
				document.getElementById("price1").innerHTML = "¥:" + num.value * parseFloat(p.value);
				cal();
			}

			function cal() {
				var a = document.getElementsByName("amount");
				var b = document.getElementsByName("price");
				var money = 0;
				for (var i = 0; i < a.length; i++) {
					money += (parseFloat(b[i].value) * parseInt(a[i].value));
				}
				document.getElementById("totalPrice").innerHTML = "¥:" + money.toFixed(2);
				cal();
			}

			function del() {
				if (confirm("确定要删除吗")) {
					alert("删除成功");
				} else {
					alert("删除失败");
				}
			}
		</script>
	</head>
	<body>

		<div class="content">
			<div class="logo">
				<img src="../操作当当购物车页面/images/dd_logo.jpg"><span onclick="window.close()">关闭</span>
			</div>
			<div class="cartList" id="cartList">
				<ul>
					<li>商品图片</li>
					<li>商品信息</li>
					<li>单价</li>
					<li>数量</li>
					<li>总价</li>
					<li>操作</li>
				</ul>
				<ul>
					<li><img src="../操作当当购物车页面/images/dog.jpg"></li>
					<li>我和狗狗活下来了</li>
					<li>¥<input type="text" name="price" value="21.90" id="pri"></li>
					<li><input type="button" name="minus" value="-" onclick="sub()"><input type="text" name="amount"
							value="1" id="numsub"><input type="button" name="plus" value="+" onclick="add()"></li>
					<li id="price0">¥21.90</li>
					<li>
						<p onclick="collection();">移入收藏</p>
						<p onclick="del()">删除</p>
					</li>
				</ul>
				<ul>
					<li><img src="../操作当当购物车页面/images/mai.jpg"></li>
					<li>灰霾来了怎么办</li>
					<li>¥<input type="text" name="price" value="24.00" id="pri2"></li>
					<li><input type="button" name="minus" value="-" onclick="sub1()"><input type="text" name="amount"
							value="1" id="numsub1"><input type="button" name="plus" value="+" onclick="add1()"></li>
					<li id="price1">¥24.00</li>
					<li>
						<p onclick="collection();">移入收藏</p>
						<p onclick="del()">删除</p>
					</li>
				</ul>
				<ol>
					<li id="totalPrice">商品总计：<span></span></li>
					<li><span onclick="cal()">结 算</span></li>
				</ol>
			</div>
		</div>
	</body>
</html>
